import React, { useState, useEffect } from 'react'
import { NavLink, Outlet } from 'react-router-dom'
import { useTranslation } from 'react-i18next';
import type { DrawerProps } from 'antd/es/drawer';
import { Drawer, } from 'antd';
import '../index.css';
import { changeDark, changeLight } from '../themes/index'
type Props = {}

const Home = (props: Props) => {
    const [flag, setFlag] = useState(false)
    const { t, i18n } = useTranslation();
    const [open, setOpen] = useState(false);
    const [placement, setPlacement] = useState<DrawerProps['placement']>('right');
    const [width, setWidth] = useState(0)
    const [dark, setDark] = useState(true)
    // 显示搜索遮罩
    const showDrawer = () => {
        if (open) setOpen(false);
        else {
            setOpen(true);
        }
        setPlacement("top");
    };
    // 关闭搜索
    const onClose = () => {
        setOpen(false);
    };
    // 浏览器的高度 默认设置为0；

    const resizeUpdate = () => {
        // 通过事件对象获取浏览器窗口的高度
        let h = window.innerWidth;
        setWidth(h);
    };

    useEffect(() => {
        // 页面刚加载完成后获取浏览器窗口的大小
        let h = window.innerWidth;
        setWidth(h)
        // 页面变化时获取浏览器窗口的大小 
        window.addEventListener('resize', resizeUpdate);
        return () => {
            // 组件销毁时移除监听事件
            window.removeEventListener('resize', resizeUpdate);
        }
    }, []);
    const DarkSwitch = () => {
        if (dark) {
            setDark(false)
            changeDark()
        }
        else {
            setDark(true)
            changeLight()
        }
    }
    return (
        <div className='wrap'>
            <div className='home_top'>
                {width > 800 ? <div className='home_container'>
                    <div className='home_emsp'></div>
                    <ul className='home_top_left'
                        onMouseOver={(e) => {
                            let im = e.target as Element
                            im.classList.add("home_active1")
                        }}
                        onMouseOut={(e) => {
                            let im = e.target as Element
                            im.classList.remove("home_active1")
                        }}
                    >
                        <li>
                            <NavLink to={"/home/article/index"} className="home_actions">{t('Articles')}</NavLink>
                        </li>
                        <li>
                            <NavLink to={"/home/file"}>{t('Archives')}</NavLink>
                        </li>
                        <li>
                            <NavLink to={"/home/booklet"}>{t('Knowledge Books')}</NavLink>
                        </li>
                    </ul>
                    <ul className='home_top_right' onMouseOver={(e) => {
                        let im = e.target as Element
                        im.classList.add('home_active1')
                    }}
                        onMouseOut={(e) => {
                            let im = e.target as Element
                            im.classList.remove('home_active1')
                        }}>
                        <li onMouseOver={() => {
                            setFlag(true)
                        }}
                            onMouseOut={() => {
                                setFlag(false)
                            }}>
                            <svg className='home_tap' viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px"><path d="M547.797333 638.208l-104.405333-103.168 1.237333-1.28a720.170667 720.170667 0 0 0 152.490667-268.373333h120.448V183.082667h-287.744V100.906667H347.605333v82.218666H59.818667V265.386667h459.178666a648.234667 648.234667 0 0 1-130.304 219.946666 643.242667 643.242667 0 0 1-94.976-137.728H211.541333a722.048 722.048 0 0 0 122.453334 187.434667l-209.194667 206.378667 58.368 58.368 205.525333-205.525334 127.872 127.829334 31.232-83.84m231.424-208.426667h-82.218666l-184.96 493.312h82.218666l46.037334-123.306667h195.242666l46.464 123.306667h82.218667l-185.002667-493.312m-107.690666 287.744l66.56-178.005333 66.602666 178.005333z" fill="currentColor"></path></svg>
                            {flag && <div className='home_modol'
                                onMouseMove={(e) => {
                                    let im = e.target as Element
                                    im.classList.add("bg")
                                }}
                                onMouseOut={(e) => {
                                    let im = e.target as Element
                                    im.classList.remove("bg")
                                    setFlag(false)
                                }}>
                                <p className='home_en' onClick={() => {
                                    setFlag(false)
                                    i18n.changeLanguage(i18n.language = 'en')
                                }}>{t('English')}</p>
                                <p className='home_zh' onClick={() => {
                                    setFlag(false)
                                    i18n.changeLanguage(i18n.language = 'zh')
                                }}>{t('Chinese')}</p>
                            </div>}
                        </li>
                        <li onClick={DarkSwitch}>
                            {dark ? <svg className='home_rid' viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3606" width="40px" height="40px"><path d="M501.48 493.55m-233.03 0a233.03 233.03 0 1 0 466.06 0 233.03 233.03 0 1 0-466.06 0Z" fill="#F9C626" p-id="3607"></path><path d="M501.52 185.35H478.9c-8.28 0-15-6.72-15-15V87.59c0-8.28 6.72-15 15-15h22.62c8.28 0 15 6.72 15 15v82.76c0 8.28-6.72 15-15 15zM281.37 262.76l-16 16c-5.86 5.86-15.36 5.86-21.21 0l-58.52-58.52c-5.86-5.86-5.86-15.36 0-21.21l16-16c5.86-5.86 15.36-5.86 21.21 0l58.52 58.52c5.86 5.86 5.86 15.35 0 21.21zM185.76 478.48v22.62c0 8.28-6.72 15-15 15H88c-8.28 0-15-6.72-15-15v-22.62c0-8.28 6.72-15 15-15h82.76c8.28 0 15 6.72 15 15zM270.69 698.63l16 16c5.86 5.86 5.86 15.36 0 21.21l-58.52 58.52c-5.86 5.86-15.36 5.86-21.21 0l-16-16c-5.86-5.86-5.86-15.36 0-21.21l58.52-58.52c5.85-5.86 15.35-5.86 21.21 0zM486.41 794.24h22.62c8.28 0 15 6.72 15 15V892c0 8.28-6.72 15-15 15h-22.62c-8.28 0-15-6.72-15-15v-82.76c0-8.28 6.72-15 15-15zM706.56 709.31l16-16c5.86-5.86 15.36-5.86 21.21 0l58.52 58.52c5.86 5.86 5.86 15.36 0 21.21l-16 16c-5.86 5.86-15.36 5.86-21.21 0l-58.52-58.52c-5.86-5.85-5.86-15.35 0-21.21zM802.17 493.59v-22.62c0-8.28 6.72-15 15-15h82.76c8.28 0 15 6.72 15 15v22.62c0 8.28-6.72 15-15 15h-82.76c-8.28 0-15-6.72-15-15zM717.24 273.44l-16-16c-5.86-5.86-5.86-15.36 0-21.21l58.52-58.52c5.86-5.86 15.36-5.86 21.21 0l16 16c5.86 5.86 5.86 15.36 0 21.21l-58.52 58.52c-5.86 5.86-15.35 5.86-21.21 0z" fill="#F9C626" p-id="3608"></path></svg>
                                : <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2312" width="24" height="24"><path d="M529.611373 1023.38565c-146.112965 0-270.826063-51.707812-374.344078-155.225827C51.74928 764.641808 0.041469 639.826318 0.041469 493.815745c0-105.053891 29.693595-202.326012 88.978393-292.22593 59.38719-89.797526 137.000103-155.942569 232.83874-198.63991 6.041111-4.607627 12.184613-3.788493 18.225724 2.252618 7.576986 4.607627 9.931996 11.365479 6.860244 20.580733C322.677735 83.736961 310.493122 142.202626 310.493122 201.589815c0 135.464227 48.328885 251.474031 144.986656 348.131801 96.657771 96.657771 212.667574 144.986656 348.131801 144.986656 74.541162 0 139.252721-11.365479 194.032283-34.19883C1003.684974 655.799424 1009.726084 656.618558 1015.767195 662.659669c7.576986 4.607627 9.931996 11.365479 6.860244 20.580733C983.104241 786.758417 918.802249 869.286132 829.721465 930.925939 740.743072 992.565746 640.706375 1023.38565 529.611373 1023.38565z" p-id="2313" fill="#d4237a"></path></svg>}

                        </li>
<<<<<<< HEAD
                        <NavLink to={"/serch"}>
                            <li>
                                <svg viewBox="64 64 896 896" focusable="false" data-icon="search" width="22px" height="22px" fill="currentColor" aria-hidden="true"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg>
                            </li>
                        </NavLink>
                    </ul>
=======
                        <li onClick={showDrawer}>
                            <svg viewBox="64 64 896 896" focusable="false" data-icon="search" width="22px" height="22px" fill="currentColor" aria-hidden="true"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg>

                        </li>
                    </ul>
                    <Drawer
                        placement={placement}
                        closable={false}
                        width={500}
                        height={900}
                        onClose={onClose}
                        open={open}
                        forceRender={true}
>>>>>>> wanghengda

                </div> :
                    <div className='home_mobile_top'>
                        <svg onClick={showDrawer} className='home_type' viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6323" width="30" height="30"><path d="M960 287.8H64c-35.3 0-64-28.7-64-64s28.7-64 64-64h896c35.3 0 64 28.7 64 64s-28.7 64-64 64zM960 576H64c-35.3 0-64-28.7-64-64s28.7-64 64-64h896c35.3 0 64 28.7 64 64s-28.7 64-64 64zM960 864.3H64c-35.3 0-64-28.7-64-64s28.7-64 64-64h896c35.3 0 64 28.7 64 64s-28.7 64-64 64z" p-id="6324" fill="#d4237a"></path></svg>
                        <Drawer
                            placement={placement}
                            closable={false}
                            width={500}
                            height={500}
                            onClose={onClose}
                            open={open}
                            forceRender={true}
                        >
                            <div className='home_container'>
                                <div className='home_emsp'></div>
                                <ul className='home_top_left'
                                    onMouseOver={(e) => {
                                        let im = e.target as Element
                                        im.classList.add("home_active1")
                                    }}
                                    onMouseOut={(e) => {
                                        let im = e.target as Element
                                        im.classList.remove("home_active1")
                                    }}
                                >
                                    <li className='home_top_1'>
                                        <NavLink to={"/home/article"} className="home_actions" onClick={onClose}>{t('Articles')}</NavLink>
                                    </li>
                                    <li>
                                        <NavLink to={"/home/booklet"} onClick={onClose}>{t('Archives')}</NavLink>
                                    </li>
                                    <li>
                                        <NavLink to={"/home/file"} onClick={onClose}>{t('Knowledge Books')}</NavLink>
                                    </li>
                                </ul>
                                <ul className='home_top_right' onMouseOver={(e) => {
                                    let im = e.target as Element
                                    im.classList.add('home_active1')
                                }}
                                    onMouseOut={(e) => {
                                        let im = e.target as Element
                                        im.classList.remove('home_active1')
                                    }}>
                                    <li onMouseOver={() => {
                                        setFlag(true)
                                    }}
                                        onMouseOut={() => {
                                            setFlag(false)
                                        }}>
                                        <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px"><path d="M547.797333 638.208l-104.405333-103.168 1.237333-1.28a720.170667 720.170667 0 0 0 152.490667-268.373333h120.448V183.082667h-287.744V100.906667H347.605333v82.218666H59.818667V265.386667h459.178666a648.234667 648.234667 0 0 1-130.304 219.946666 643.242667 643.242667 0 0 1-94.976-137.728H211.541333a722.048 722.048 0 0 0 122.453334 187.434667l-209.194667 206.378667 58.368 58.368 205.525333-205.525334 127.872 127.829334 31.232-83.84m231.424-208.426667h-82.218666l-184.96 493.312h82.218666l46.037334-123.306667h195.242666l46.464 123.306667h82.218667l-185.002667-493.312m-107.690666 287.744l66.56-178.005333 66.602666 178.005333z" fill="currentColor"></path></svg>
                                        {flag && <div className='home_modol'
                                            onMouseMove={(e) => {
                                                let im = e.target as Element
                                                im.classList.add("home_bg")
                                            }}
                                            onMouseOut={(e) => {
                                                let im = e.target as Element
                                                im.classList.remove("home_bg")
                                                setFlag(false)
                                            }}>
                                            <p className='home_en' onClick={() => {
                                                setFlag(false)
                                                i18n.changeLanguage(i18n.language = 'en')

                                            }}>{t('English')}</p>
                                            <p className='home_zh' onClick={() => {
                                                setFlag(false)
                                                i18n.changeLanguage(i18n.language = 'zh')
                                            }}>{t('Chinese')}</p>
                                        </div>}
                                    </li>
                                    <li onClick={DarkSwitch}>
                                        {dark ? <svg className='home_rid' viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3606" width="40px" height="40px"><path d="M501.48 493.55m-233.03 0a233.03 233.03 0 1 0 466.06 0 233.03 233.03 0 1 0-466.06 0Z" fill="#F9C626" p-id="3607"></path><path d="M501.52 185.35H478.9c-8.28 0-15-6.72-15-15V87.59c0-8.28 6.72-15 15-15h22.62c8.28 0 15 6.72 15 15v82.76c0 8.28-6.72 15-15 15zM281.37 262.76l-16 16c-5.86 5.86-15.36 5.86-21.21 0l-58.52-58.52c-5.86-5.86-5.86-15.36 0-21.21l16-16c5.86-5.86 15.36-5.86 21.21 0l58.52 58.52c5.86 5.86 5.86 15.35 0 21.21zM185.76 478.48v22.62c0 8.28-6.72 15-15 15H88c-8.28 0-15-6.72-15-15v-22.62c0-8.28 6.72-15 15-15h82.76c8.28 0 15 6.72 15 15zM270.69 698.63l16 16c5.86 5.86 5.86 15.36 0 21.21l-58.52 58.52c-5.86 5.86-15.36 5.86-21.21 0l-16-16c-5.86-5.86-5.86-15.36 0-21.21l58.52-58.52c5.85-5.86 15.35-5.86 21.21 0zM486.41 794.24h22.62c8.28 0 15 6.72 15 15V892c0 8.28-6.72 15-15 15h-22.62c-8.28 0-15-6.72-15-15v-82.76c0-8.28 6.72-15 15-15zM706.56 709.31l16-16c5.86-5.86 15.36-5.86 21.21 0l58.52 58.52c5.86 5.86 5.86 15.36 0 21.21l-16 16c-5.86 5.86-15.36 5.86-21.21 0l-58.52-58.52c-5.86-5.85-5.86-15.35 0-21.21zM802.17 493.59v-22.62c0-8.28 6.72-15 15-15h82.76c8.28 0 15 6.72 15 15v22.62c0 8.28-6.72 15-15 15h-82.76c-8.28 0-15-6.72-15-15zM717.24 273.44l-16-16c-5.86-5.86-5.86-15.36 0-21.21l58.52-58.52c5.86-5.86 15.36-5.86 21.21 0l16 16c5.86 5.86 5.86 15.36 0 21.21l-58.52 58.52c-5.86 5.86-15.35 5.86-21.21 0z" fill="#F9C626" p-id="3608"></path></svg>
                                            : <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2312" width="24" height="24"><path d="M529.611373 1023.38565c-146.112965 0-270.826063-51.707812-374.344078-155.225827C51.74928 764.641808 0.041469 639.826318 0.041469 493.815745c0-105.053891 29.693595-202.326012 88.978393-292.22593 59.38719-89.797526 137.000103-155.942569 232.83874-198.63991 6.041111-4.607627 12.184613-3.788493 18.225724 2.252618 7.576986 4.607627 9.931996 11.365479 6.860244 20.580733C322.677735 83.736961 310.493122 142.202626 310.493122 201.589815c0 135.464227 48.328885 251.474031 144.986656 348.131801 96.657771 96.657771 212.667574 144.986656 348.131801 144.986656 74.541162 0 139.252721-11.365479 194.032283-34.19883C1003.684974 655.799424 1009.726084 656.618558 1015.767195 662.659669c7.576986 4.607627 9.931996 11.365479 6.860244 20.580733C983.104241 786.758417 918.802249 869.286132 829.721465 930.925939 740.743072 992.565746 640.706375 1023.38565 529.611373 1023.38565z" p-id="2313" fill="#d4237a"></path></svg>}

                                    </li>
                                    <li >
                                        <svg viewBox="64 64 896 896" focusable="false" data-icon="search" width="22px" height="22px" fill="currentColor" aria-hidden="true"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg>
                                    </li>
                                </ul>
                            </div>
                        </Drawer>

                    </div>

                }

            </div>
            <Outlet></Outlet>
<<<<<<< HEAD
            {/* <div className='home_bottom'>
                <NavLink to={"https://bjwz.bwie.com/users/sign_in"}><svg className='icon' viewBox="0 0 1024 1024" version="1.1" p-id="4788" width="24" height="24"><defs><style type="text/css"></style></defs><path d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m-182.4 768C288 768 256 736 256 694.4s32-73.6 73.6-73.6 73.6 32 73.6 73.6-32 73.6-73.6 73.6z m185.6 0c0-144-115.2-259.2-259.2-259.2v-80c185.6 0 339.2 150.4 339.2 339.2h-80z m172.8 0c0-240-195.2-432-432-432V256c281.6 0 512 230.4 512 512h-80z" fill="currentColor"></path></svg></NavLink>
                <NavLink to={"https://github.com/fantasticit/wipi"}><svg className='icon' viewBox="64 64 896 896" focusable="false" data-icon="github" width="24" height="24" fill="currentColor" aria-hidden="true"><path d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0138.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"></path></svg></NavLink>
            </div> */}
=======
            <div className='home_bottom'>
                <NavLink to={"https://bjwz.bwie.com/users/sign_in"}><svg className='icon' viewBox="0 0 1024 1024" version="1.1" p-id="4788" width="24" height="24"><defs><style type="text/css"></style></defs><path d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m-182.4 768C288 768 256 736 256 694.4s32-73.6 73.6-73.6 73.6 32 73.6 73.6-32 73.6-73.6 73.6z m185.6 0c0-144-115.2-259.2-259.2-259.2v-80c185.6 0 339.2 150.4 339.2 339.2h-80z m172.8 0c0-240-195.2-432-432-432V256c281.6 0 512 230.4 512 512h-80z" fill="currentColor"></path></svg></NavLink>
                <NavLink to={"https://github.com/fantasticit/wipi"}><svg className='icon' viewBox="64 64 896 896" focusable="false" data-icon="github" width="24" height="24" fill="currentColor" aria-hidden="true"><path d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0138.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"></path></svg></NavLink>
            </div>
>>>>>>> wanghengda
        </div >
    )
}

export default Home